<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
div {
	margin-top: 20px;
	border-radius: 4px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	color: #fff;
}

@keyframes bg {
	0% {
		background: red;
	}

	50% {
		background: green;
	}

	100% {
		background: blue;
	}
}

.animation {
	/* 动画名称 */
	animation-name: bg;

/* 动画执行周期 */
	animation-duration: 5s;

/* 动画执行速度 */
	animation-timing-function: ease;

/* 延时执行动画 */
	animation-delay: 3s;

/* 动画执行次数 */
	animation-iteration-count: infinite;

/* 动画执行状态 */
	animation-play-state: running;

/* 动画执行模式 */
	animation-fill-mode: forwards;
}

.animation:hover {
	animation-play-state: paused;
}

.transition {
	background: turquoise;

/* 设置哪一个CSS属性执行过渡动画 */
	transition-property: all;

/* 过渡动画执行周期 */
	transition-duration: 1s;

/* 过渡动画执行速度 */
	transition-timing-function: ease;

/* 过渡动画延迟执行时间 */
	transition-delay: 0s;
}

.transition:hover {
	margin-left: 10px;
	background: violet;
	box-shadow: 0 0 5px 5px #ddd;
}

/* 2D */
.transform {
	background: skyblue;
	line-height: 3;
}

.translate {
	transform: translate(50px, 10px);
}

.rotate {
	background: rgb(136, 202, 116);
	transform: rotate(45deg);
}

.scale {
	background: rgb(159, 49, 173);
	transform: scale(1, 1);
	transition: 1s;
}

.scale:hover {
	transform: scale(1.2);
}

.skew {
	background: rgb(184, 45, 52);
	transform: skew(30deg, 30deg);
}

.matrix {
	background: rgb(216, 240, 6);
	transform: matrix(1, 0, .5, 1, 150, 0);
}

    </style>
</head>

<body>
    <h2>animation</h2>
    <div class="animation">animation</div>
    <h2>transition</h2>
    <div class="transition">transition</div>
    <h2>transform</h2>
    <div class="transform translate">transform translate</div>
    <div class="transform rotate">transform rotate</div>
    <div class="transform scale">transform scale</div>
    <div class="transform skew">transform skew</div>
    <div class="transform matrix">transform matrix</div>
</body>

</html>